<template>
  <div class="layout">
    <Row type="flex">
      <i-col :span="spanLeft" class="layout-menu-left">
        <Menu
          :active-name="activeKey"
          theme="dark"
          width="auto"
          class="menu"
          @on-select="handleSelect"
        >
          <!-- 左侧logo -->
          <div class="layout-logo-left">
            <ul>
              <li>
                <img src="../assets/img/sheep.jpg" alt width="48" height="48" />
              </li>
              <li>
                <p class="sys-title">后台管理系统</p>
              </li>
            </ul>
          </div>

          <!-- 菜单栏 -->
          <Submenu :key="item.route" :name="item.route" v-for="item in menus">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              <span class="layout-text">{{ item.name }}</span>
            </template>
            <Menu-item :key="sm.route" :name="sm.route" v-for="sm in item.sub_menus">
              <Icon type="ios-paper"></Icon>
              <span class="sub-menu-text">{{ sm.name }}</span>
            </Menu-item>
          </Submenu>
        </Menu>
      </i-col>
      <i-col :span="spanRight" class="layout-menu-right">
        <!-- 头部 -->
        <!-- <div class="layout-header">
          <i-button type="text" @click="toggleClick">
            <Icon type="navicon" size="32"></Icon>
          </i-button>
        </div>-->
        <!-- 面包屑 -->
        <div class="layout-breadcrumb">
          <Breadcrumb>
            <Breadcrumb-item href="/index">首页</Breadcrumb-item>
            <!-- <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
            <Breadcrumb-item>某应用</Breadcrumb-item>-->
          </Breadcrumb>
        </div>

        <!-- 内容区域 -->
        <div class="layout-content">
          <div class="layout-content-main">
            <router-view />
          </div>
        </div>

        <div class="layout-copy">2011-2016 &copy; TalkingData</div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { get } from "../utils/request";

export default {
  data() {
    return {
      spanLeft: 5,
      spanRight: 19,
      activeKey: 1,
      key: 2,
      menus: []
    };
  },
  computed: {
    iconSize() {
      return this.spanLeft === 5 ? 14 : 24;
    }
  },
  methods: {
    // 收缩菜单栏
    toggleClick() {
      if (this.spanLeft === 5) {
        this.spanLeft = 2;
        this.spanRight = 22;
      } else {
        this.spanLeft = 5;
        this.spanRight = 19;
      }
    },
    // 获取菜单栏数据
    getMenus() {
      get("/menu/")
        .then(res => {
          this.menus = res.data.menus;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 处理菜单选择
    handleSelect(val) {
      this.$router.push(val, () => {});
    }
  },
  created() {
    this.getMenus();
  }
};
</script>

<style lang='less' scoped>
.layout {
  height: 100%;
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
.ivu-row-flex {
  height: 100%;
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content {
  min-height: 500px;
  margin: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 5px 0 5px;
  color: #9ea7b4;
}
.layout-menu-left {
  background: #464c5b;
  width: 15%;
}
.layout-menu-right {
  width: 85%;
  height: 600px;
  overflow: hidden;
  overflow-y: auto;
}
.menu {
  background: #464c5b;
}
.layout-header {
  height: 60px;
  background: #fff;
  // box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
  width: 90%;
  background: #464c5b;
  border-radius: 3px;
  margin: 15px auto;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    li {
      padding: 8px;
      img {
        border-radius: 50%;
      }
    }
  }
}
.layout-ceiling-main a {
  color: #9ba7b5;
}
.layout-hide-text .layout-text {
  display: none;
}
.ivu-col {
  transition: width 0.2s ease-in-out;
}
</style>
